<template>
  <div class="login-wrap">
    <div class="login-box">
      <div><img src="../../assets/a.jpg" alt="" /></div>
      <div class="login-R">
        <h3>访客注册</h3>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="账户" prop="username">
            <el-input v-model="ruleForm.username" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item label="确认" prop="password2">
            <el-input v-model="ruleForm.password2" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm(ruleFormRef)"
              style="width: 100%"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
        <p @click="() => $router.push('/login')">Or去登陆</p>
      </div>
    </div>
    <!--********************************* 弹框 ********************************-->
    <el-dialog v-model="dialogVisible" title="Tips" width="30%">
      <span>是否去登录页面</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="(dialogVisible = false), $router.push('/login')"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { sign } from "../../api";
import { ElMessage } from "element-plus";
const ruleFormRef = ref();
const dialogVisible = ref(false);
const ruleForm = ref({
  username: "",
  password: "",
  password2: "",
});
const rules = ref({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  password2: [
    { required: true, message: "与上次输入密码不一致", trigger: "blur" },
  ],
});
const submitForm = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (ruleForm.value.password === ruleForm.value.password2) {
        sign({
          username: ruleForm.value.username,
          password: ruleForm.value.password,
        }).then((resp: any) => {
          if (resp.data.code === 200) {
            ElMessage({
              message: resp.data.msg,
              type: "success",
            });
            dialogVisible.value = true;
          } else {
            ElMessage.error(resp.data.msg);
          }
        });
      } else {
        alert("两次输入密码不一致");
        ruleForm.value.username = "";
        ruleForm.value.password = "";
        ruleForm.value.password2 = "";
      }
    } else {
      console.log("登陆失败!", fields);
    }
  });
};
</script>

<style lang="scss" scoped>
.login-wrap {
  width: 100%;
  height: 100%;
  background: #ccc;
  box-sizing: border-box;
}
.login-box {
  width: 80%;
  height: 83%;
  display: flex;
  align-items: center;
  background: #eee;
  margin: 0 auto;
  position: fixed;
  top: 10%;
  left: 10%;
}
</style>